<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <input type="text" name="" id="" />
    <input type="text" name="" id="" placeholder="名字" />
    <input type="text" name="" id="" placeholder="价钱" />
    <input type="text" name="" id="" placeholder="商品介绍" />
    <input type="button" name="" id="" value="提交" />
    <ul id="box"></ul>

    <script src="axios.min.js"></script>

    <script>
      let uid = localStorage.getItem("id");
      let token = localStorage.getItem("token");
      //   接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
      //      接口请求方式：get
      //      接口参数：
      //     1.

      // pimg 2.
      // pname 3.
      // pprice 4.
      // pdesc 5.
      // uid （可选）用户商品

      //      使用方式  post 请求，参数在请求体

      //添加商品
      let inps = document.querySelectorAll("input");
      inps[4].onclick = function () {
        let uid = localStorage.getItem("id");
        let pimg = inps[0].value;
        let pname = inps[1].value;
        let pprice = inps[2].value;
        let pdesc = inps[3].value;
        let showAPI = " http://jx.xuzhixiang.top/ap/api/goods/goods-add.php";

        axios
          .get(showAPI, {
            params: {
              pimg,
              pname,
              pprice,
              pdesc,
              uid,
            },
          })
          .then((r) => {
            console.log(r.data);
            location.reload();
          });
      };
      /*   所有商品接口
            get
            参数
            pagesize  每页获取几个数据
            pagenum 获取第几页数据
            uid  用户id
            http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 */

      let pagesize = 10; //取几个
      let pagenum = 0; //页数

      console.log(uid);
      console.log(token);
      let api = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";

      axios
        .get(api, {
          params: {
            pagesize,
            pagenum,
            uid,
          },
        })
        .then((r) => {
          let aa = r.data;
          console.log(r.data.data);

          let { data } = aa;
          let boxhtml = data
            .map(
              (v1) =>
                `

              <li>
                <p>${v1.pid}</p>
                <p>${v1.pname}</p>
                <p>${v1.pprice}</p>
                <img src="${v1.pimg}" alt="">
                <button id="del" onclick ="delfn(${v1.pid})">删除</button>
                <a href="修改.html">修改</a>
              </li>

                  `
            )
            .join("");

          let box = document.querySelector("#box");
          box.innerHTML = boxhtml;
        });

      // 接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
      //    接口请求方式：get
      //    接口参数：

      //           pid（必选）商品的id
      //           uid（必选）用户的id
      //            token（必选）登陆时候返回的token

      //             使用方式
      //            http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

      //    服务器返回json数据

      function delfn(pid) {
        let delapi = "http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        //  let aaaa = {uid,pid,token};
        //  console.log(aaaa);

        let uid = localStorage.getItem("id");
        let token2 = localStorage.getItem("token");

        // console.log(localStorage.getItem("id"));
        let uid1 = localStorage.getItem("id");
        console.log(uid1);
        let token = localStorage.getItem("token");

        axios
          .get(delapi, {
            params: {
              pid,
              uid,
              token:token2,
            },
          })
          .then((r) => {
            console.log(r);
            // location.reload()
          });
      }
    </script>
  </body>
</html>
